#include("/_function/layout/default.vue")
#@layout(i18n['title'])
#define jsCustom()
<template type="text/x-template" id="tpl-center-content">
    <div id="content">
        <form class="form-horizontal" @submit.prevent="submit">
            <div class="page-header">
                <div class="container-fluid">
                    <div class="pull-right">
                        <button type="submit" :disabled="submitting" data-toggle="tooltip" title="#(i18n['button_save'])" class="btn btn-primary"><i class="fa fa-save"></i></button>
                        <a href="#(CONTEXT_PATH)/system/admin-menu" data-toggle="tooltip" title="#(i18n['button_cancel'])" class="btn btn-default"><i class="fa fa-reply"></i></a>
                    </div>
                    <h1>菜单编辑</h1>
                    <ul class="breadcrumb">
                        <li><a href="#(CONTEXT_PATH)/common/dashboard">首页</a></li>
                        <li><a href="#(CONTEXT_PATH)/system/admin-menu">后台菜单</a></li>
                    </ul>
                </div>
            </div>
            <div class="container-fluid">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-edit"></i> 新增/修改</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group required">
                            <label class="col-sm-2 control-label">菜单名称</label>
                            <div class="col-sm-10">
                                <input type="hidden" v-model="live.adminMenu.adminMenuId">
                                <div v-for="language in languages">
                                    <div class="input-group"
                                         :class="{'has-error' : live.errors.descriptions[language.languageCode].name}">
                                        <span class="input-group-addon">{{ language.languageCode }}</span>
                                        <input v-model="live.adminMenu.descriptions[language.languageCode].name"
                                               type="text"
                                               placeholder="菜单名称"
                                               class="form-control">
                                    </div>
                                    <div class="text-danger" v-if="live.errors.descriptions[language.languageCode].name">
                                        {{ live.errors.descriptions[language.languageCode].name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.status}">
                            <label class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                                <switch-checkbox :checked="live.adminMenu.status === 1" @switch="switched"></switch-checkbox>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <menu-editor :menu="live.adminMenu.content" @updated="updated"></menu-editor>
            </div>
        </form>
    </div>
</template>
#include("/_function/component/switch-checkbox.vue")
#include("/_function/component/menu-editor.vue")
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('center-content', {
        template: document.getElementById('tpl-center-content'),
        data: function () {
            return {
                languages: [],
                submitting: false,
                default: { // 模板数据
                    errors: {
                        descriptions: {}
                    },
                    adminMenu: {
                        adminMenuId: '#(id)' || null,
                        content: [],
                        status: 1,
                        dateAdded: null,
                        dateModified: null,
                        descriptions: {}
                    }
                },
                live: {
                    adminMenu: {},
                    errors: {}
                }
            }
        },
        created: function () {
            this.init()
            this.clear()
        },
        methods: {
            init: function () {
                let self = this;
                self.live = _.cloneDeep(this.default)
                gateway.post('api/system/localisation/language/list').then(function (response) {
                    let languages = response.data.languages
                    _.forEach(languages, function (language) {
                        self.live.adminMenu.descriptions[language.languageCode] = {name: ''}
                        self.live.errors.descriptions[language.languageCode] = {name: ''}
                        self.default.errors.descriptions[language.languageCode] = {name: ''}
                    })
                    self.live.adminMenu = _.cloneDeep(self.live.adminMenu)
                    self.live.errors = _.cloneDeep(self.live.errors)
                    self.languages = _.cloneDeep(languages)
                }).then(function () {
                    if (self.live.adminMenu.adminMenuId) {
                        gateway.post('api/system/admin-menu/get', {adminMenuId: self.live.adminMenu.adminMenuId}).then(function (response) {
                            let data = response.data;
                            switch (data.code) {
                                case '00000':
                                    self.live.adminMenu = _.merge({}, self.live.adminMenu, data.adminMenu)
                                    break;
                                default:
                                    layer.alert(data.message, {icon: 0})
                            }
                        })
                    }
                })
            },
            switched: function (v) {
                this.live.adminMenu.status = v ? 1 : 0
            },
            updated: function (menu) {
                this.live.adminMenu.content = menu
            },
            submit: function () {
                let self = this
                self.submitting = true;
                self.clear()
                let i = layer.load(2)
                gateway.post('api/system/admin-menu/saveOrUpdate', this.live.adminMenu).then(function (response) {
                    let data = response.data;
                    self.live.errors = _.merge({}, self.live.errors, data.errors || {});
                    switch (data.code) {
                        case '00000':
                            self.live.adminMenu.adminMenuId = data.adminMenuId
                            layer.alert(data.message, {icon: 1})
                            break;
                        default:
                            layer.alert(data.message, {icon: 0})
                    }
                }).finally(() => {
                    this.submitting = false;
                    layer.close(i)
                })
            },
            clear: function () {
                this.live.errors = _.cloneDeep(this.default.errors)
            }
        }
    })
})
</script>
#end